import { lazy, LazyExoticComponent, Suspense } from 'react';
import { Route as RT } from '@ant-design/pro-layout/lib/typings';
import ProSkeleton from '@ant-design/pro-skeleton';
import { Route, Switch } from 'react-router-dom';
import { useParsedRoutes } from '@/hooks/useRouteMenu';
import PageComponentMapping from '@/pages/mapping';

// Home内容组件，通过读取菜单配置来设置对应的路由
const HomeContent = ({ routes }: { routes: RT[] }) => {
  const [, availRoutes] = useParsedRoutes(routes);
  return (
    <Suspense fallback={<ProSkeleton type='descriptions' />}>
      <Switch>
        {availRoutes.map((r) => {
          // @ts-ignore
          const comp: LazyExoticComponent = PageComponentMapping[r.component];
          return <Route exact path={r.path} component={comp} key={r.path} />;
        })}
        <Route path='*' component={lazy(() => import('@/pages/404'))} />
      </Switch>
    </Suspense>
  );
};

export default HomeContent;
